<template>
  <div class="shopCarContainer">
      <!-- 商品列表区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner" v-for="(item,index) in goodsList" :key="item.id">
            <mt-switch 
            v-model="$store.getters.getGoodSlected[item.id]" 
            @change="SelectedChanged(item.id,$store.getters.getGoodSlected[item.id])">
            </mt-switch>
            <img src="../../images/menu1.png" alt="">
            <div class="info">
                <h3>{{item.title}}</h3>
                <p>
                    <span class="price">¥{{item.sell_price}}</span> 
                    <goodsNumBox class="box" :initCount="$store.getters.getGoodCount[item.id]" :goodsid="item.id"></goodsNumBox>
                    <span @click="removegoods(item.id,index)">删除</span>
                </p>
            </div>
        </div>
      </div>
    </div>
    <!-- 商品结算区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner jiesuan">
            <div class="left">
                <p>总计 (不含运费)</p>
                <p>以勾选商品 <span class="red">{{$store.getters.getGoodsAllCountAndPrice.count}}</span>  件 ,总价<span class="red">¥ {{$store.getters.getGoodsAllCountAndPrice.price}}</span></p>
            </div>  
            <mt-button type="danger">去结算</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import goodsNumBox from '../subcomponent/goodsNumBox2.vue'
export default {
    data (){
        return {
            goodsList:[] //存放商品列表数据
        }
    },
    created(){
        this.getGoodsList();
    },
    methods:{
        getGoodsList(){ //获取当前购物车里面的所有商品数据详情,传递当前购物车里面所有的商品的id的数组
            var id=[];//存放所有商品id
            this.$store.state.car.forEach(item => {
                id.push(item.id);
            });
            //如果car中没有商品,直接返回,不调用接口
            if(id.length <=0){
                return;
            }
            this.$http.get('api/goodsInfo/shopcar?id='+id.join(',')).then(res=>{
                if(res.body.status===0){
                    this.goodsList=res.body.message;
                }
            })
        },
        removegoods(id,index){//点击删除按钮 实现商品删除 1.从goodsList中删除 2.从vuex中删除

            this.goodsList.splice(index,1);
            this.$store.commit('removeGoods',id);

        },
        SelectedChanged(id,selected){ //选中状态改变触发
            // console.log(id+'----------'+selected);
            this.$store.commit('updataGoodsSelected',{id:id,selected:selected})
        }
    },
    components:{
        goodsNumBox,
    }
};
</script>
<style lang="scss" scoped>
.shopCarContainer {
    background-color: #eee;
    overflow: hidden;
    .mui-card-content-inner {
        display:flex;
        align-items: center;
       img {
           width: 60px;
           height: 60px;
       } 
       .info {
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           h3 {
               font-size: 14px;
           }
           .price {
               color: red;
           }
           .box {
               height: 27px;
           }
       }
    }
    .jiesuan {
        display:flex;
        justify-content: space-between;
        align-items: center;
        .red {
            color:red;
            font-weight: bold;
            font-size: 16px;
        }
    }
}
</style>
